<template>
  <div class="weather-alert-container">
    <!-- 顶部导航栏 -->
    <div class="top-navbar">
      <div class="nav-content">
        <div class="nav-left">
          <h1 class="nav-title">
            <span class="title-icon">🌤️</span>
            MES智能天气预警系统
          </h1>
        </div>
        <div class="nav-right">
          <div class="system-status">
            <div class="status-item">
              <span class="status-label">系统状态</span>
              <span class="status-value online">在线</span>
            </div>
            <div class="status-item">
              <span class="status-label">更新时间</span>
              <span class="status-value">{{ formatDateTime(new Date()) }}</span>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 主要内容区域 -->
    <div class="main-content">
      <!-- 快速操作卡片 -->
      <div class="quick-actions">
        <div class="action-card" @click="showWeatherAnalysis">
          <div class="action-icon">🌦️</div>
          <div class="action-title">天气分析</div>
          <div class="action-desc">实时天气影响评估</div>
        </div>
        <div class="action-card" @click="showProductionOverview">
          <div class="action-icon">🏭</div>
          <div class="action-title">生产概览</div>
          <div class="action-desc">生产数据实时监控</div>
        </div>
        <div class="action-card" @click="showEquipmentStatus">
          <div class="action-icon">⚙️</div>
          <div class="action-title">设备状态</div>
          <div class="action-desc">设备健康度监控</div>
        </div>
        <div class="action-card" @click="showSafetyAnalysis">
          <div class="action-icon">🚨</div>
          <div class="action-title">安全分析</div>
          <div class="action-desc">安全事件预警</div>
        </div>
      </div>

      <!-- 天气分析详情模态框 -->
      <div v-if="showWeatherAnalysisModal" class="modal-overlay" @click="closeWeatherAnalysisModal">
        <div class="modal-content" @click.stop>
          <div class="modal-header">
            <h3 class="modal-title">🌦️ 天气影响分析</h3>
            <button class="modal-close" @click="closeWeatherAnalysisModal">×</button>
          </div>

          <div class="modal-body">
            <!-- 城市选择 -->
            <div class="analysis-section">
              <div class="section-title">📍 选择城市</div>
              <div class="city-selector">
                <input v-model="analysisCity" @keyup.enter="analyzeWeatherImpact" placeholder="输入城市名称"
                  class="city-input" />
                <button @click="analyzeWeatherImpact" class="btn btn-primary">
                  分析影响
                </button>
              </div>
            </div>

            <!-- 生产活动类型选择 -->
            <div class="analysis-section">
              <div class="section-title">🏭 生产活动类型</div>
              <div class="activity-selector">
                <label class="activity-option">
                  <input type="radio" v-model="selectedActivityType" value="户外作业" />
                  <span class="activity-label">户外作业</span>
                </label>
                <label class="activity-option">
                  <input type="radio" v-model="selectedActivityType" value="物流运输" />
                  <span class="activity-label">物流运输</span>
                </label>
                <label class="activity-option">
                  <input type="radio" v-model="selectedActivityType" value="设备维护" />
                  <span class="activity-label">设备维护</span>
                </label>
              </div>
            </div>

            <!-- 分析结果 -->
            <div v-if="weatherImpactAnalysis" class="analysis-section">
              <div class="section-title">📊 分析结果</div>

              <!-- 风险等级 -->
              <div class="risk-level-card" :class="getRiskLevelClass(weatherImpactAnalysis.riskLevel)">
                <div class="risk-icon">⚠️</div>
                <div class="risk-content">
                  <div class="risk-title">风险等级</div>
                  <div class="risk-value">{{ getRiskLevelText(weatherImpactAnalysis.riskLevel) }}</div>
                </div>
              </div>

              <!-- 当前天气影响 -->
              <div class="impact-card">
                <div class="impact-header">
                  <span class="impact-icon">🌡️</span>
                  <span class="impact-title">当前天气影响</span>
                </div>
                <div class="impact-content">
                  <div class="impact-item">
                    <span class="item-label">温度:</span>
                    <span class="item-value">{{ weatherImpactAnalysis.currentWeather?.temp }}°C</span>
                  </div>
                  <div class="impact-item">
                    <span class="item-label">天气:</span>
                    <span class="item-value">{{ weatherImpactAnalysis.currentWeather?.text }}</span>
                  </div>
                  <div class="impact-item">
                    <span class="item-label">湿度:</span>
                    <span class="item-value">{{ weatherImpactAnalysis.currentWeather?.humidity }}%</span>
                  </div>
                  <div class="impact-item">
                    <span class="item-label">风速:</span>
                    <span class="item-value">{{ weatherImpactAnalysis.currentWeather?.windSpeed }}km/h</span>
                  </div>
                </div>
              </div>

              <!-- 生产建议 -->
              <div class="recommendations-card">
                <div class="recommendations-header">
                  <span class="recommendations-icon">💡</span>
                  <span class="recommendations-title">生产建议</span>
                </div>
                <div class="recommendations-list">
                  <div v-for="(rec, index) in weatherImpactAnalysis.recommendations" :key="index"
                    class="recommendation-item">
                    <span class="rec-number">{{ index + 1 }}</span>
                    <span class="rec-text">{{ rec }}</span>
                  </div>
                </div>
              </div>

              <!-- 预警信息 -->
              <div v-if="weatherImpactAnalysis.alerts.length > 0" class="alerts-card">
                <div class="alerts-header">
                  <span class="alerts-icon">🚨</span>
                  <span class="alerts-title">预警信息</span>
                </div>
                <div class="alerts-list">
                  <div v-for="alert in weatherImpactAnalysis.alerts" :key="alert.id" class="alert-item"
                    :class="getAlertSeverityClass(alert.severity)">
                    <div class="alert-header">
                      <span class="alert-severity">{{ getAlertSeverityText(alert.severity) }}</span>
                      <span class="alert-activity">{{ alert.activityName }}</span>
                    </div>
                    <div class="alert-description">{{ alert.impact }}</div>
                  </div>
                </div>
              </div>
            </div>

            <!-- 历史趋势分析 -->
            <div v-if="weatherTrends.length > 0" class="analysis-section">
              <div class="section-title">📈 天气趋势分析</div>
              <div class="trends-grid">
                <div v-for="trend in weatherTrends" :key="trend.date" class="trend-card">
                  <div class="trend-date">{{ formatDate(trend.date) }}</div>
                  <div class="trend-change">
                    <span class="change-icon" :class="getTrendIconClass(trend.temperatureChange)">
                      {{ getTrendIcon(trend.temperatureChange) }}
                    </span>
                    <span class="change-value">{{ trend.temperatureChange > 0 ? '+' : '' }}{{ trend.temperatureChange
                    }}°C</span>
                  </div>
                  <div class="trend-risk">
                    风险增加: {{ trend.riskIncrease.toFixed(1) }}%
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- 详细天气信息模态框 -->
      <div v-if="showDayDetailModal" class="modal-overlay" @click="closeDayDetailModal">
        <div class="modal-content" @click.stop>
          <div class="modal-header">
            <h3 class="modal-title">🌤️ {{ selectedDayDetail?.date ? formatDate(selectedDayDetail.date) : '' }} 详细天气
            </h3>
            <button class="modal-close" @click="closeDayDetailModal">×</button>
          </div>

          <div class="modal-body">
            <!-- 日期信息 -->
            <div class="day-info-section">
              <div class="day-header">
                <div class="day-icon">{{ getWeatherIcon(selectedDayDetail?.text || '') }}</div>
                <div class="day-info">
                  <div class="day-name">{{ selectedDayDetail?.date ? formatDayName(selectedDayDetail.date) : '' }}</div>
                  <div class="day-date">{{ selectedDayDetail?.date ? formatDate(selectedDayDetail.date) : '' }}</div>
                </div>
              </div>
              <div class="day-weather">
                <div class="weather-main-info">{{ selectedDayDetail?.text || '' }}</div>
                <div class="temperature-range">
                  <span class="temp-high">{{ selectedDayDetail?.maxTemp || 0 }}°C</span>
                  <span class="temp-separator">/</span>
                  <span class="temp-low">{{ selectedDayDetail?.minTemp || 0 }}°C</span>
                </div>
              </div>
            </div>

            <!-- 24小时详细预报 -->
            <div class="hourly-forecast-section">
              <div class="section-title">⏰ 24小时详细预报</div>
              <div class="hourly-grid">
                <div v-for="hour in hourlyForecast" :key="hour.time" class="hourly-item">
                  <div class="hour-time">{{ hour.time }}</div>
                  <div class="hour-icon">{{ hour.icon }}</div>
                  <div class="hour-temp">{{ hour.temp }}°</div>
                  <div class="hour-weather">{{ hour.weather }}</div>
                  <div class="hour-details">
                    <div class="detail-row">
                      <span class="detail-label">湿度:</span>
                      <span class="detail-value">{{ hour.humidity }}%</span>
                    </div>
                    <div class="detail-row">
                      <span class="detail-label">风速:</span>
                      <span class="detail-value">{{ hour.windSpeed }}km/h</span>
                    </div>
                    <div class="detail-row">
                      <span class="detail-label">降水:</span>
                      <span class="detail-value">{{ hour.precipitation }}%</span>
                    </div>
                  </div>
                </div>
              </div>
            </div>

            <!-- 生产影响分析 -->
            <div class="production-impact-section">
              <div class="section-title">🏭 生产影响分析</div>
              <div class="impact-summary">
                <div class="impact-item">
                  <div class="impact-icon">🌡️</div>
                  <div class="impact-info">
                    <div class="impact-title">温度影响</div>
                    <div class="impact-desc">{{ getTemperatureImpact(selectedDayDetail?.maxTemp || 0) }}</div>
                  </div>
                </div>
                <div class="impact-item">
                  <div class="impact-icon">💧</div>
                  <div class="impact-info">
                    <div class="impact-title">降水影响</div>
                    <div class="impact-desc">{{ getPrecipitationImpact(selectedDayDetail?.text || '') }}</div>
                  </div>
                </div>
                <div class="impact-item">
                  <div class="impact-icon">💨</div>
                  <div class="impact-info">
                    <div class="impact-title">风力影响</div>
                    <div class="impact-desc">{{ getWindImpact(selectedDayDetail?.windSpeed || 0) }}</div>
                  </div>
                </div>
              </div>
            </div>

            <!-- 生产建议 -->
            <div class="production-recommendations-section">
              <div class="section-title">💡 生产建议</div>
              <div class="recommendations-list">
                <div v-for="(rec, index) in getProductionRecommendations(selectedDayDetail)" :key="index"
                  class="recommendation-item">
                  <span class="rec-number">{{ index + 1 }}</span>
                  <span class="rec-text">{{ rec }}</span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- 生产概览模态框 -->
      <div v-if="showProductionOverviewModal" class="modal-overlay" @click="closeProductionOverviewModal">
        <div class="modal-content" @click.stop>
          <div class="modal-header">
            <h3 class="modal-title">🏭 生产数据概览</h3>
            <button class="modal-close" @click="closeProductionOverviewModal">×</button>
          </div>

          <div class="modal-body">
            <!-- 生产指标概览 -->
            <div class="analysis-section">
              <div class="section-title">📊 生产指标概览</div>
              <div class="metrics-grid">
                <div class="metric-item">
                  <div class="metric-icon">📈</div>
                  <div class="metric-info">
                    <div class="metric-value">{{ productionDashboard?.productionEfficiency }}%</div>
                    <div class="metric-label">生产效率</div>
                  </div>
                </div>
                <div class="metric-item">
                  <div class="metric-icon">✅</div>
                  <div class="metric-info">
                    <div class="metric-value">{{ productionDashboard?.qualityRate }}%</div>
                    <div class="metric-label">质量合格率</div>
                  </div>
                </div>
                <div class="metric-item">
                  <div class="metric-icon">🛡️</div>
                  <div class="metric-info">
                    <div class="metric-value">{{ productionDashboard?.safetyScore }}%</div>
                    <div class="metric-label">安全评分</div>
                  </div>
                </div>
                <div class="metric-item">
                  <div class="metric-icon">⚡</div>
                  <div class="metric-info">
                    <div class="metric-value">{{ productionDashboard?.runningEquipment }}/{{
                      productionDashboard?.totalEquipment }}</div>
                    <div class="metric-label">设备运行率</div>
                  </div>
                </div>
              </div>
            </div>

            <!-- 订单状态 -->
            <div class="analysis-section">
              <div class="section-title">📋 订单状态</div>
              <div class="orders-summary">
                <div class="order-status-item">
                  <div class="status-icon completed">✅</div>
                  <div class="status-info">
                    <div class="status-value">{{ productionDashboard?.completedOrders }}</div>
                    <div class="status-label">已完成</div>
                  </div>
                </div>
                <div class="order-status-item">
                  <div class="status-icon pending">⏳</div>
                  <div class="status-info">
                    <div class="status-value">{{ productionDashboard?.pendingOrders }}</div>
                    <div class="status-label">进行中</div>
                  </div>
                </div>
                <div class="order-status-item">
                  <div class="status-icon delayed">⚠️</div>
                  <div class="status-info">
                    <div class="status-value">{{ productionDashboard?.delayedOrders }}</div>
                    <div class="status-label">延期</div>
                  </div>
                </div>
              </div>
            </div>

            <!-- 人员状态 -->
            <div class="analysis-section">
              <div class="section-title">👥 人员状态</div>
              <div class="workers-summary">
                <div class="worker-status-item">
                  <div class="status-icon active">🟢</div>
                  <div class="status-info">
                    <div class="status-value">{{ productionDashboard?.activeWorkers }}</div>
                    <div class="status-label">在岗</div>
                  </div>
                </div>
                <div class="worker-status-item">
                  <div class="status-icon break">🟡</div>
                  <div class="status-info">
                    <div class="status-value">{{ productionDashboard?.onBreakWorkers }}</div>
                    <div class="status-label">休息</div>
                  </div>
                </div>
                <div class="worker-status-item">
                  <div class="status-icon total">🔵</div>
                  <div class="status-info">
                    <div class="status-value">{{ productionDashboard?.totalWorkers }}</div>
                    <div class="status-label">总人数</div>
                  </div>
                </div>
              </div>
            </div>

            <!-- 天气影响分析 -->
            <div class="analysis-section">
              <div class="section-title">🌦️ 天气对生产的影响</div>
              <div class="weather-impact-summary">
                <div class="impact-item">
                  <div class="impact-icon">🌡️</div>
                  <div class="impact-info">
                    <div class="impact-title">温度影响</div>
                    <div class="impact-desc">当前温度28°C，适宜户外作业</div>
                  </div>
                </div>
                <div class="impact-item">
                  <div class="impact-icon">💨</div>
                  <div class="impact-info">
                    <div class="impact-title">风力影响</div>
                    <div class="impact-desc">东北风12km/h，对高空作业有轻微影响</div>
                  </div>
                </div>
                <div class="impact-item">
                  <div class="impact-icon">☀️</div>
                  <div class="impact-info">
                    <div class="impact-title">光照影响</div>
                    <div class="impact-desc">晴天，光照充足，适合户外作业</div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- 设备状态模态框 -->
      <div v-if="showEquipmentStatusModal" class="modal-overlay" @click="closeEquipmentStatusModal">
        <div class="modal-content" @click.stop>
          <div class="modal-header">
            <h3 class="modal-title">⚙️ 设备状态监控</h3>
            <button class="modal-close" @click="closeEquipmentStatusModal">×</button>
          </div>

          <div class="modal-body">
            <!-- 设备选择 -->
            <div class="analysis-section">
              <div class="section-title">🔍 选择设备</div>
              <div class="equipment-selector">
                <select v-model="selectedEquipmentId" class="equipment-select">
                  <option value="EQ001">EQ001 - 主生产线设备</option>
                  <option value="EQ002">EQ002 - 包装设备</option>
                  <option value="EQ003">EQ003 - 检测设备</option>
                  <option value="EQ004">EQ004 - 运输设备</option>
                </select>
                <button @click="getEquipmentHealth" class="btn btn-primary">
                  查看状态
                </button>
              </div>
            </div>

            <!-- 设备健康状态 -->
            <div v-if="equipmentHealth" class="analysis-section">
              <div class="section-title">📊 设备健康状态</div>

              <!-- 整体健康度 -->
              <div class="health-overview">
                <div class="health-circle" :class="getHealthClass(equipmentHealth.overallHealth)">
                  <div class="health-value">{{ equipmentHealth.overallHealth }}%</div>
                  <div class="health-label">健康度</div>
                </div>
                <div class="health-info">
                  <div class="health-item">
                    <span class="health-icon">🌡️</span>
                    <span class="health-text">温度: {{ equipmentHealth.temperature }}°C</span>
                  </div>
                  <div class="health-item">
                    <span class="health-icon">📊</span>
                    <span class="health-text">振动: {{ equipmentHealth.vibration }}%</span>
                  </div>
                  <div class="health-item">
                    <span class="health-icon">🔊</span>
                    <span class="health-text">噪音: {{ equipmentHealth.noise }}dB</span>
                  </div>
                </div>
              </div>

              <!-- 详细指标 -->
              <div class="health-metrics">
                <div class="metric-row">
                  <div class="metric-label">压力</div>
                  <div class="metric-bar">
                    <div class="metric-fill" :style="{ width: equipmentHealth.pressure + '%' }"></div>
                  </div>
                  <div class="metric-value">{{ equipmentHealth.pressure }}%</div>
                </div>
                <div class="metric-row">
                  <div class="metric-label">流量</div>
                  <div class="metric-bar">
                    <div class="metric-fill" :style="{ width: equipmentHealth.flowRate + '%' }"></div>
                  </div>
                  <div class="metric-value">{{ equipmentHealth.flowRate }}%</div>
                </div>
                <div class="metric-row">
                  <div class="metric-label">天气敏感度</div>
                  <div class="metric-bar">
                    <div class="metric-fill weather-sensitive"
                      :style="{ width: equipmentHealth.weatherSensitivity + '%' }"></div>
                  </div>
                  <div class="metric-value">{{ equipmentHealth.weatherSensitivity }}%</div>
                </div>
              </div>

              <!-- 维护信息 -->
              <div class="maintenance-info">
                <div class="section-title">🔧 维护信息</div>
                <div class="maintenance-item">
                  <span class="maintenance-icon">📅</span>
                  <span class="maintenance-label">最后校准:</span>
                  <span class="maintenance-value">{{ formatDate(equipmentHealth.lastCalibration) }}</span>
                </div>
                <div class="maintenance-item">
                  <span class="maintenance-icon">⏰</span>
                  <span class="maintenance-label">下次维护:</span>
                  <span class="maintenance-value">{{ formatDate(moment(equipmentHealth.lastCalibration).add(30,
                    'days').format('YYYY-MM-DD')) }}</span>
                </div>
              </div>

              <!-- 维护建议 -->
              <div v-if="equipmentHealth.recommendations.length > 0" class="recommendations-section">
                <div class="section-title">💡 维护建议</div>
                <div class="recommendations-list">
                  <div v-for="(rec, index) in equipmentHealth.recommendations" :key="index" class="recommendation-item">
                    <span class="rec-number">{{ index + 1 }}</span>
                    <span class="rec-text">{{ rec }}</span>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- 安全分析模态框 -->
      <div v-if="showSafetyAnalysisModal" class="modal-overlay" @click="closeSafetyAnalysisModal">
        <div class="modal-content" @click.stop>
          <div class="modal-header">
            <h3 class="modal-title">🚨 安全事件分析</h3>
            <button class="modal-close" @click="closeSafetyAnalysisModal">×</button>
          </div>

          <div class="modal-body">
            <!-- 安全概览 -->
            <div class="analysis-section">
              <div class="section-title">📊 安全概览</div>
              <div class="safety-overview">
                <div class="safety-stat">
                  <div class="stat-icon">🚨</div>
                  <div class="stat-info">
                    <div class="stat-value">{{ safetyIncidents.length }}</div>
                    <div class="stat-label">总事件数</div>
                  </div>
                </div>
                <div class="safety-stat">
                  <div class="stat-icon">🌦️</div>
                  <div class="stat-info">
                    <div class="stat-value">{{ weatherRelatedIncidents }}</div>
                    <div class="stat-label">天气相关</div>
                  </div>
                </div>
                <div class="safety-stat">
                  <div class="stat-icon">⚠️</div>
                  <div class="stat-info">
                    <div class="stat-value">{{ highSeverityIncidents }}</div>
                    <div class="stat-label">高风险</div>
                  </div>
                </div>
              </div>
            </div>

            <!-- 最近安全事件 -->
            <div class="analysis-section">
              <div class="section-title">📋 最近安全事件</div>
              <div class="incidents-list">
                <div v-for="incident in safetyIncidents.slice(0, 5)" :key="incident.id" class="incident-item"
                  :class="getIncidentSeverityClass(incident.severity)">
                  <div class="incident-header">
                    <div class="incident-type">
                      <span class="type-icon">{{ getIncidentIcon(incident.type) }}</span>
                      <span class="type-name">{{ incident.type }}</span>
                    </div>
                    <div class="incident-severity" :class="getIncidentSeverityClass(incident.severity)">
                      {{ getIncidentSeverityText(incident.severity) }}
                    </div>
                  </div>

                  <div class="incident-content">
                    <div class="incident-location">
                      <span class="location-icon">📍</span>
                      <span class="location-text">{{ incident.location }}</span>
                    </div>
                    <div class="incident-time">
                      <span class="time-icon">🕐</span>
                      <span class="time-text">{{ formatDateTime(incident.occurredAt) }}</span>
                    </div>
                    <div class="incident-description">{{ incident.description }}</div>
                  </div>

                  <div class="incident-footer">
                    <div class="weather-related" :class="{ 'related': incident.weatherRelated }">
                      <span class="weather-icon">🌦️</span>
                      <span class="weather-text">{{ incident.weatherRelated ? '天气相关' : '非天气相关' }}</span>
                    </div>
                    <div class="incident-status" :class="getIncidentStatusClass(incident.status)">
                      {{ getIncidentStatusText(incident.status) }}
                    </div>
                  </div>
                </div>
              </div>
            </div>

            <!-- 安全趋势分析 -->
            <div class="analysis-section">
              <div class="section-title">📈 安全趋势分析</div>
              <div class="safety-trends">
                <div class="trend-item">
                  <div class="trend-icon">📊</div>
                  <div class="trend-info">
                    <div class="trend-title">事件频率</div>
                    <div class="trend-desc">本月安全事件较上月减少15%</div>
                  </div>
                </div>
                <div class="trend-item">
                  <div class="trend-icon">🌦️</div>
                  <div class="trend-info">
                    <div class="trend-title">天气影响</div>
                    <div class="trend-desc">天气相关事件占比30%，需要加强预防</div>
                  </div>
                </div>
                <div class="trend-item">
                  <div class="trend-icon">🛡️</div>
                  <div class="trend-info">
                    <div class="trend-title">预防措施</div>
                    <div class="trend-desc">已实施的安全措施有效降低风险</div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- 天气信息区域 -->
      <div class="weather-section">
        <div class="section-header">
          <h2 class="section-title">实时天气监控</h2>
          <div class="weather-controls">
            <input v-model="cityName" @keyup.enter="getWeatherByCity" placeholder="输入城市名称" class="city-input" />
            <button @click="getWeatherByCity" class="btn btn-primary">
              获取天气
            </button>
          </div>
        </div>

        <div v-if="weatherData" class="weather-content">
          <!-- 当前天气卡片 -->
          <div class="current-weather-card">
            <div class="weather-main">
              <div class="temperature-display">
                <span class="temp-value">{{ weatherData.current?.temp }}</span>
                <span class="temp-unit">°C</span>
              </div>
              <div class="weather-info">
                <div class="weather-condition">{{ weatherData.current?.text }}</div>
                <div class="weather-location">{{ weatherData.city }}</div>
              </div>
            </div>
            <div class="weather-details">
              <div class="detail-item">
                <span class="detail-icon">💧</span>
                <span class="detail-label">湿度</span>
                <span class="detail-value">{{ weatherData.current?.humidity }}%</span>
              </div>
              <div class="detail-item">
                <span class="detail-icon">💨</span>
                <span class="detail-label">风速</span>
                <span class="detail-value">{{ weatherData.current?.windSpeed }}km/h</span>
              </div>
              <div class="detail-item">
                <span class="detail-icon">🧭</span>
                <span class="detail-label">风向</span>
                <span class="detail-value">{{ weatherData.current?.windDir }}</span>
              </div>
            </div>
          </div>

          <!-- 天气预报网格 -->
          <div class="forecast-grid">
            <div v-for="(day, index) in weatherData.forecast?.slice(0, 7)" :key="index" class="forecast-day"
              :class="{ 'today': index === 0 }" @click="showDayDetail(day, index)">
              <div class="forecast-date">
                <div class="day-name">{{ formatDayName(day.date) }}</div>
                <div class="day-date">{{ formatDate(day.date) }}</div>
              </div>
              <div class="forecast-weather">
                <div class="weather-icon">{{ getWeatherIcon(day.text) }}</div>
                <div class="weather-text">{{ day.text }}</div>
              </div>
              <div class="forecast-temp">
                <span class="temp-high">{{ day.maxTemp }}°</span>
                <span class="temp-separator">/</span>
                <span class="temp-low">{{ day.minTemp }}°</span>
              </div>
              <div class="forecast-hint">点击查看详情</div>
            </div>
          </div>
        </div>
      </div>

      <!-- 生产预警区域 -->
      <div class="alerts-section">
        <div class="section-header">
          <h2 class="section-title">生产预警管理</h2>
          <div class="alerts-summary">
            <span class="alerts-count">{{ productionAlerts.length }} 个预警</span>
            <span class="alerts-status" :class="getOverallAlertStatus()">
              {{ getOverallAlertStatusText() }}
            </span>
          </div>
        </div>

        <div class="alerts-content">
          <div v-if="productionAlerts.length > 0" class="alerts-list">
            <div v-for="alert in productionAlerts" :key="alert.id" class="alert-item" :class="alert.level">
              <div class="alert-header">
                <div class="alert-level">
                  <span class="level-badge" :class="alert.level">
                    {{ getAlertLevelText(alert.level) }}
                  </span>
                  <span class="alert-type">{{ alert.type }}</span>
                </div>
                <span class="alert-time">{{ formatDateTime(alert.timestamp) }}</span>
              </div>

              <div class="alert-content">
                <h4 class="alert-title">{{ alert.title }}</h4>
                <p class="alert-description">{{ alert.description }}</p>
              </div>

              <div class="alert-actions">
                <button @click="markAsProcessed(alert.id)" class="btn btn-outline">
                  标记已处理
                </button>
                <button @click="viewAlertDetails(alert)" class="btn btn-text">
                  查看详情
                </button>
              </div>
            </div>
          </div>

          <div v-else class="no-alerts">
            <div class="no-alerts-icon">✅</div>
            <h3 class="no-alerts-title">暂无生产预警</h3>
            <p class="no-alerts-text">当前生产环境运行正常</p>
          </div>
        </div>
      </div>

      <!-- 生产数据概览 -->
      <div class="production-section">
        <div class="section-header">
          <h2 class="section-title">生产数据概览</h2>
          <button @click="refreshProductionData" class="btn btn-secondary">
            刷新数据
          </button>
        </div>

        <div v-if="productionDashboard" class="production-grid">
          <div class="metric-card">
            <div class="metric-icon">📊</div>
            <div class="metric-content">
              <div class="metric-value">{{ productionDashboard.totalOrders }}</div>
              <div class="metric-label">总订单数</div>
            </div>
          </div>

          <div class="metric-card">
            <div class="metric-icon">✅</div>
            <div class="metric-content">
              <div class="metric-value">{{ productionDashboard.completedOrders }}</div>
              <div class="metric-label">已完成</div>
            </div>
          </div>

          <div class="metric-card">
            <div class="metric-icon">⚙️</div>
            <div class="metric-content">
              <div class="metric-value">{{ productionDashboard.runningEquipment }}</div>
              <div class="metric-label">运行设备</div>
            </div>
          </div>

          <div class="metric-card">
            <div class="metric-icon">👥</div>
            <div class="metric-content">
              <div class="metric-value">{{ productionDashboard.activeWorkers }}</div>
              <div class="metric-label">在岗员工</div>
            </div>
          </div>

          <div class="metric-card">
            <div class="metric-icon">📈</div>
            <div class="metric-content">
              <div class="metric-value">{{ productionDashboard.productionEfficiency }}%</div>
              <div class="metric-label">生产效率</div>
            </div>
          </div>

          <div class="metric-card">
            <div class="metric-icon">🛡️</div>
            <div class="metric-content">
              <div class="metric-value">{{ productionDashboard.safetyScore }}%</div>
              <div class="metric-label">安全评分</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, computed } from 'vue'
import WeatherService from '@/services/weatherService'
import moment from 'moment'

// 响应式数据
const cityName = ref('北京')
const weatherData = ref<any>(null)
const productionAlerts = ref<any[]>([])
const productionDashboard = ref<any>(null)

// 天气分析模态框状态
const showWeatherAnalysisModal = ref(false)
const analysisCity = ref('北京')
const selectedActivityType = ref('户外作业')
const weatherImpactAnalysis = ref<any>(null)
const weatherTrends = ref<any[]>([])

// 生产概览模态框状态
const showProductionOverviewModal = ref(false)

// 设备状态模态框状态
const showEquipmentStatusModal = ref(false)
const selectedEquipmentId = ref('EQ001')
const equipmentHealth = ref<any>(null)

// 安全分析模态框状态
const showSafetyAnalysisModal = ref(false)
const safetyIncidents = ref<any[]>([])
const weatherRelatedIncidents = ref(0)
const highSeverityIncidents = ref(0)

// 详细天气信息模态框状态
const showDayDetailModal = ref(false)
const selectedDayDetail = ref<any>(null)
const hourlyForecast = ref<any[]>([])

// 方法
const getWeatherByCity = async () => {
  if (!cityName.value.trim()) return

  try {
    const result = await WeatherService.getWeatherByCity(cityName.value)
    weatherData.value = result
  } catch (error) {
    console.error('获取天气失败:', error)
  }
}

const markAsProcessed = (alertId: string) => {
  productionAlerts.value = productionAlerts.value.filter(alert => alert.id !== alertId)
}

const viewAlertDetails = (alert: any) => {
  console.log('查看预警详情:', alert)
}

const refreshProductionData = async () => {
  try {
    // 这里可以调用生产数据API
    console.log('刷新生产数据')
  } catch (error) {
    console.error('刷新生产数据失败:', error)
  }
}

const showWeatherAnalysis = () => {
  showWeatherAnalysisModal.value = true
  analysisCity.value = cityName.value // 默认使用当前城市
  selectedActivityType.value = '户外作业' // 默认选择户外作业
  weatherImpactAnalysis.value = null
  weatherTrends.value = []
}

const closeWeatherAnalysisModal = () => {
  showWeatherAnalysisModal.value = false
}

const analyzeWeatherImpact = async () => {
  if (!analysisCity.value.trim()) return

  try {
    // 模拟获取天气影响分析数据
    weatherImpactAnalysis.value = {
      city: analysisCity.value,
      activityType: selectedActivityType.value,
      currentWeather: {
        temp: 28,
        text: '晴天',
        humidity: 71,
        windSpeed: 12,
        windDir: '东北风'
      },
      riskLevel: 'medium',
      recommendations: [
        '当前天气适宜户外作业',
        '注意防晒，准备遮阳设备',
        '保持充足水分补充',
        '定期休息，避免中暑'
      ],
      alerts: [
        {
          id: '1',
          severity: 'info',
          activityName: '户外作业',
          impact: '天气适宜，可正常进行户外作业'
        }
      ]
    }

    // 模拟获取历史趋势数据
    weatherTrends.value = [
      { date: moment().subtract(1, 'day').format('YYYY-MM-DD'), temperatureChange: 2, riskIncrease: 10 },
      { date: moment().subtract(2, 'days').format('YYYY-MM-DD'), temperatureChange: -1, riskIncrease: 5 },
      { date: moment().subtract(3, 'days').format('YYYY-MM-DD'), temperatureChange: 3, riskIncrease: 15 },
      { date: moment().subtract(4, 'days').format('YYYY-MM-DD'), temperatureChange: -2, riskIncrease: 8 },
      { date: moment().subtract(5, 'days').format('YYYY-MM-DD'), temperatureChange: 1, riskIncrease: 12 },
    ]
  } catch (error) {
    console.error('获取天气影响分析失败:', error)
  }
}

const showProductionOverview = () => {
  showProductionOverviewModal.value = true
}

const closeProductionOverviewModal = () => {
  showProductionOverviewModal.value = false
}

const showEquipmentStatus = () => {
  showEquipmentStatusModal.value = true
}

const closeEquipmentStatusModal = () => {
  showEquipmentStatusModal.value = false
}

const getEquipmentHealth = async () => {
  try {
    // 模拟获取设备健康状态数据
    equipmentHealth.value = {
      id: selectedEquipmentId.value,
      name: selectedEquipmentId.value.replace('EQ', ''),
      overallHealth: 95, // 95%
      temperature: 30,
      vibration: 80,
      noise: 65,
      pressure: 90,
      flowRate: 85,
      weatherSensitivity: 92,
      lastCalibration: moment().subtract(10, 'days').format('YYYY-MM-DD'),
      recommendations: [
        '设备运行正常，无需立即维护',
        '建议定期检查设备连接',
        '注意观察温度变化'
      ]
    }
  } catch (error) {
    console.error('获取设备健康状态失败:', error)
  }
}

const showSafetyAnalysis = () => {
  showSafetyAnalysisModal.value = true
  // 模拟获取安全事件数据
  safetyIncidents.value = [
    {
      id: '1',
      type: '跌倒',
      severity: 'critical',
      location: '生产线区域',
      occurredAt: moment().subtract(1, 'hour').format('YYYY-MM-DD HH:mm'),
      description: '员工在搬运物料时失去平衡，导致跌倒受伤。',
      weatherRelated: false,
      status: 'open'
    },
    {
      id: '2',
      type: '触电',
      severity: 'warning',
      location: '配电室',
      occurredAt: moment().subtract(2, 'hours').format('YYYY-MM-DD HH:mm'),
      description: '一名员工在检查设备时意外触碰到带电设备，造成轻微电击。',
      weatherRelated: false,
      status: 'closed'
    },
    {
      id: '3',
      type: '火灾',
      severity: 'critical',
      location: '仓库',
      occurredAt: moment().subtract(3, 'hours').format('YYYY-MM-DD HH:mm'),
      description: '仓库内堆放的易燃材料起火，火势迅速蔓延。',
      weatherRelated: true,
      status: 'open'
    },
    {
      id: '4',
      type: '机械故障',
      severity: 'medium',
      location: '主生产线',
      occurredAt: moment().subtract(4, 'hours').format('YYYY-MM-DD HH:mm'),
      description: '设备突然停止运行，导致生产线中断。',
      weatherRelated: false,
      status: 'open'
    },
    {
      id: '5',
      type: '化学品泄漏',
      severity: 'warning',
      location: '实验室',
      occurredAt: moment().subtract(5, 'hours').format('YYYY-MM-DD HH:mm'),
      description: '实验过程中发生化学品泄漏，造成环境污染。',
      weatherRelated: false,
      status: 'closed'
    }
  ]
  weatherRelatedIncidents.value = safetyIncidents.value.filter(incident => incident.weatherRelated).length
  highSeverityIncidents.value = safetyIncidents.value.filter(incident => incident.severity === 'critical').length
}

const closeSafetyAnalysisModal = () => {
  showSafetyAnalysisModal.value = false
}

const showDayDetail = (day: any, index: number) => {
  selectedDayDetail.value = day
  showDayDetailModal.value = true

  // 生成24小时详细预报数据
  generateHourlyForecast(day)
}

const closeDayDetailModal = () => {
  showDayDetailModal.value = false
  selectedDayDetail.value = null
}

const generateHourlyForecast = (day: any) => {
  const hours = []
  for (let i = 0; i < 24; i++) {
    const hour = i.toString().padStart(2, '0') + ':00'
    const temp = Math.floor(Math.random() * (day.maxTemp - day.minTemp + 1)) + day.minTemp
    const humidity = Math.floor(Math.random() * 40) + 40
    const windSpeed = Math.floor(Math.random() * 20) + 5
    const precipitation = Math.floor(Math.random() * 100)

    hours.push({
      time: hour,
      icon: getWeatherIcon(day.text),
      temp: temp,
      weather: day.text,
      humidity: humidity,
      windSpeed: windSpeed,
      precipitation: precipitation
    })
  }
  hourlyForecast.value = hours
}

const getWeatherIcon = (weather: string) => {
  const iconMap: Record<string, string> = {
    '晴天': '☀️',
    '多云': '⛅',
    '阴天': '☁️',
    '小雨': '🌦️',
    '中雨': '🌧️',
    '大雨': '⛈️',
    '暴雨': '🌩️',
    '小雪': '🌨️',
    '中雪': '❄️',
    '大雪': '⛄',
    '雾': '🌫️',
    '霾': '😷',
    '沙尘暴': '🌪️'
  }
  return iconMap[weather] || '☀️'
}

const getTemperatureImpact = (temp: number) => {
  if (temp > 35) return '高温天气，严重影响户外作业，建议暂停'
  if (temp > 30) return '温度较高，建议调整作业时间，避开正午'
  if (temp < 5) return '低温天气，注意防寒保暖，检查设备防冻'
  if (temp < 0) return '严寒天气，暂停户外作业，加强保暖措施'
  return '温度适宜，可正常进行户外作业'
}

const getPrecipitationImpact = (weather: string) => {
  if (weather.includes('雨') || weather.includes('雪')) {
    return '降水天气，暂停户外作业，注意防滑防摔'
  }
  return '无降水，适合户外作业'
}

const getWindImpact = (windSpeed: number) => {
  if (windSpeed > 20) return '大风天气，暂停高空作业，注意安全'
  if (windSpeed > 15) return '风力较大，注意高空作业安全'
  if (windSpeed > 10) return '风力适中，可正常作业'
  return '风力较小，适合各种作业'
}

const getProductionRecommendations = (day: any) => {
  const recommendations = []

  if (day.maxTemp > 35) {
    recommendations.push('暂停户外作业，避免中暑')
    recommendations.push('调整工作时间至早晚凉爽时段')
    recommendations.push('增加员工休息频率')
  } else if (day.maxTemp < 5) {
    recommendations.push('加强保暖防护装备')
    recommendations.push('检查设备防冻状态')
    recommendations.push('选择温度相对较高的时段作业')
  }

  if (day.text.includes('雨') || day.text.includes('雪')) {
    recommendations.push('暂停户外高风险作业')
    recommendations.push('加强货物防护和运输安全')
    recommendations.push('准备应急响应预案')
  }

  if (day.windSpeed > 15) {
    recommendations.push('暂停高空作业')
    recommendations.push('加强安全防护措施')
    recommendations.push('注意设备稳定性')
  }

  if (recommendations.length === 0) {
    recommendations.push('天气适宜，可正常进行生产活动')
    recommendations.push('保持常规安全措施')
    recommendations.push('定期检查设备状态')
  }

  return recommendations
}

const getRiskLevelText = (level: string) => {
  const levelMap: Record<string, string> = {
    'high': '高级预警',
    'medium': '中级预警',
    'low': '低级预警'
  }
  return levelMap[level] || level
}

const getRiskLevelClass = (level: string) => {
  switch (level) {
    case 'high':
      return 'risk-level-high'
    case 'medium':
      return 'risk-level-medium'
    case 'low':
      return 'risk-level-low'
    default:
      return ''
  }
}

const getAlertSeverityText = (severity: string) => {
  const severityMap: Record<string, string> = {
    'critical': '紧急',
    'warning': '注意',
    'info': '提示'
  }
  return severityMap[severity] || severity
}

const getAlertSeverityClass = (severity: string) => {
  switch (severity) {
    case 'critical':
      return 'alert-critical'
    case 'warning':
      return 'alert-warning'
    case 'info':
      return 'alert-info'
    default:
      return ''
  }
}

const getTrendIcon = (change: number) => {
  if (change > 0) return '↑'
  if (change < 0) return '↓'
  return '→'
}

const getTrendIconClass = (change: number) => {
  if (change > 0) return 'trend-up'
  if (change < 0) return 'trend-down'
  return 'trend-stable'
}

const getOverallAlertStatus = () => {
  if (productionAlerts.value.length === 0) return 'normal'
  const hasHigh = productionAlerts.value.some(alert => alert.level === 'high')
  return hasHigh ? 'critical' : 'warning'
}

const getOverallAlertStatusText = () => {
  const status = getOverallAlertStatus()
  const statusMap: Record<string, string> = {
    'normal': '正常',
    'warning': '注意',
    'critical': '紧急'
  }
  return statusMap[status]
}

const formatDateTime = (date: Date) => {
  return moment(date).format('MM/DD HH:mm')
}

const formatDate = (date: string) => {
  return moment(date).format('MM/DD')
}

const formatDayName = (date: string) => {
  const dayNames = ['周日', '周一', '周二', '周三', '周四', '周五', '周六']
  return dayNames[moment(date).day()]
}

const getAlertLevelText = (level: string) => {
  const levelMap: Record<string, string> = {
    'high': '高级预警',
    'medium': '中级预警',
    'low': '低级预警'
  }
  return levelMap[level] || level
}

const getHealthClass = (health: number) => {
  if (health >= 90) return 'health-excellent'
  if (health >= 70) return 'health-good'
  if (health >= 50) return 'health-fair'
  return 'health-poor'
}

const getIncidentSeverityClass = (severity: string) => {
  switch (severity) {
    case 'critical':
      return 'critical'
    case 'warning':
      return 'warning'
    case 'medium':
      return 'medium'
    case 'info':
      return 'info'
    default:
      return 'info'
  }
}

const getIncidentSeverityText = (severity: string) => {
  const severityMap: Record<string, string> = {
    'critical': '紧急',
    'warning': '警告',
    'medium': '中等',
    'info': '提示'
  }
  return severityMap[severity] || severity
}

const getIncidentIcon = (type: string) => {
  const iconMap: Record<string, string> = {
    '跌倒': '🦶',
    '触电': '⚡',
    '火灾': '🔥',
    '机械故障': '⚙️',
    '化学品泄漏': '🧪',
    '高空坠落': '🏗️',
    '车辆事故': '🚗'
  }
  return iconMap[type] || '⚠️'
}

const getIncidentStatusClass = (status: string) => {
  switch (status) {
    case 'open':
      return 'open'
    case 'closed':
      return 'closed'
    case 'investigating':
      return 'investigating'
    default:
      return 'open'
  }
}

const getIncidentStatusText = (status: string) => {
  const statusMap: Record<string, string> = {
    'open': '处理中',
    'closed': '已关闭',
    'investigating': '调查中'
  }
  return statusMap[status] || status
}

// 模拟数据
const mockProductionAlerts = [
  {
    id: '1',
    level: 'high',
    type: '高温预警',
    title: '高温预警',
    description: '当前温度超过35°C，建议暂停户外作业，注意防暑降温',
    timestamp: new Date(Date.now() - 1000 * 60 * 60)
  },
  {
    id: '2',
    level: 'medium',
    type: '暴雨预警',
    title: '暴雨预警',
    description: '预计未来2小时有强降雨，可能影响物流运输',
    timestamp: new Date(Date.now() - 1000 * 60 * 60 * 60)
  }
]

const mockProductionDashboard = {
  totalOrders: 156,
  completedOrders: 89,
  runningEquipment: 23,
  activeWorkers: 67,
  productionEfficiency: 87,
  safetyScore: 94
}

// 模拟安全事件数据
const mockSafetyIncidents = [
  {
    id: '1',
    type: '跌倒',
    severity: 'critical',
    location: '生产线区域',
    occurredAt: moment().subtract(1, 'hour').format('YYYY-MM-DD HH:mm'),
    description: '员工在搬运物料时失去平衡，导致跌倒受伤。',
    weatherRelated: false,
    status: 'open'
  },
  {
    id: '2',
    type: '触电',
    severity: 'warning',
    location: '配电室',
    occurredAt: moment().subtract(2, 'hours').format('YYYY-MM-DD HH:mm'),
    description: '一名员工在检查设备时意外触碰到带电设备，造成轻微电击。',
    weatherRelated: false,
    status: 'closed'
  },
  {
    id: '3',
    type: '火灾',
    severity: 'critical',
    location: '仓库',
    occurredAt: moment().subtract(3, 'hours').format('YYYY-MM-DD HH:mm'),
    description: '仓库内堆放的易燃材料起火，火势迅速蔓延。',
    weatherRelated: true,
    status: 'open'
  },
  {
    id: '4',
    type: '机械故障',
    severity: 'medium',
    location: '主生产线',
    occurredAt: moment().subtract(4, 'hours').format('YYYY-MM-DD HH:mm'),
    description: '设备突然停止运行，导致生产线中断。',
    weatherRelated: false,
    status: 'open'
  },
  {
    id: '5',
    type: '化学品泄漏',
    severity: 'warning',
    location: '实验室',
    occurredAt: moment().subtract(5, 'hours').format('YYYY-MM-DD HH:mm'),
    description: '实验过程中发生化学品泄漏，造成环境污染。',
    weatherRelated: false,
    status: 'closed'
  }
]

// 模拟安全趋势数据
const mockSafetyTrends = [
  {
    date: moment().subtract(1, 'month').format('YYYY-MM-DD'),
    eventFrequencyChange: -15, // 减少15%
    weatherImpactChange: 30 // 天气相关事件占比30%
  }
]

// 生命周期
onMounted(() => {
  productionAlerts.value = mockProductionAlerts
  productionDashboard.value = mockProductionDashboard
  getWeatherByCity()
  // 模拟安全事件数据
  safetyIncidents.value = mockSafetyIncidents
  weatherRelatedIncidents.value = safetyIncidents.value.filter(incident => incident.weatherRelated).length
  highSeverityIncidents.value = safetyIncidents.value.filter(incident => incident.severity === 'critical').length
})
</script>

<style scoped>
/* 基础样式 */
.weather-alert-container {
  min-height: 100vh;
  background: #f8fafc;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

/* 顶部导航栏 */
.top-navbar {
  background: #1e40af;
  color: white;
  padding: 1rem 0;
  box-shadow: 0 4px 20px rgba(30, 64, 175, 0.3);
}

.nav-content {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 2rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.nav-title {
  font-size: 1.8rem;
  font-weight: 700;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.title-icon {
  font-size: 2rem;
}

.system-status {
  display: flex;
  gap: 2rem;
}

.status-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
}

.status-label {
  font-size: 0.8rem;
  opacity: 0.8;
}

.status-value {
  font-weight: 600;
  font-size: 0.9rem;
}

.status-value.online {
  color: #10b981;
}

/* 主要内容区域 */
.main-content {
  max-width: 1400px;
  margin: 0 auto;
  padding: 2rem;
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

/* 快速操作卡片 */
.quick-actions {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1.5rem;
}

.action-card {
  background: white;
  border-radius: 16px;
  padding: 2rem;
  text-align: center;
  cursor: pointer;
  transition: all 0.3s ease;
  border: 2px solid transparent;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

.action-card:hover {
  transform: translateY(-5px);
  border-color: #1e40af;
  box-shadow: 0 8px 30px rgba(30, 64, 175, 0.15);
}

.action-icon {
  font-size: 3rem;
  margin-bottom: 1rem;
}

.action-title {
  font-size: 1.25rem;
  font-weight: 600;
  color: #1e293b;
  margin-bottom: 0.5rem;
}

.action-desc {
  color: #64748b;
  font-size: 0.9rem;
}

/* 天气分析模态框 */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
}

.modal-content {
  background: white;
  border-radius: 20px;
  width: 90%;
  max-width: 800px;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
  overflow-y: auto;
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1.5rem 2rem;
  border-bottom: 1px solid #e2e8f0;
}

.modal-title {
  font-size: 1.8rem;
  font-weight: 700;
  color: #1e293b;
  margin: 0;
}

.modal-close {
  background: none;
  border: none;
  font-size: 2rem;
  cursor: pointer;
  color: #64748b;
  transition: color 0.3s ease;
}

.modal-close:hover {
  color: #1e293b;
}

.modal-body {
  padding: 2rem;
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

/* 分析区域 */
.analysis-section {
  background: #f8fafc;
  border-radius: 16px;
  padding: 1.5rem;
  border: 1px solid #e2e8f0;
}

.section-title {
  font-size: 1.1rem;
  font-weight: 600;
  color: #1e293b;
  margin-bottom: 1rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid #e2e8f0;
}

.city-selector {
  display: flex;
  gap: 1rem;
  align-items: center;
}

.city-input {
  padding: 0.75rem 1rem;
  border: 2px solid #e2e8f0;
  border-radius: 12px;
  font-size: 1rem;
  width: 200px;
  transition: all 0.3s ease;
}

.city-input:focus {
  outline: none;
  border-color: #1e40af;
  box-shadow: 0 0 0 3px rgba(30, 64, 175, 0.1);
}

.activity-selector {
  display: flex;
  gap: 1.5rem;
  margin-top: 1rem;
}

.activity-option {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  cursor: pointer;
  padding: 0.75rem 1rem;
  border-radius: 12px;
  border: 2px solid #e2e8f0;
  transition: all 0.3s ease;
}

.activity-option:hover {
  background: #1e40af;
  color: white;
  border-color: #1e40af;
}

.activity-option input {
  transform: scale(1.2);
  margin-right: 0.5rem;
}

.activity-label {
  font-size: 0.9rem;
  font-weight: 500;
}

/* 分析结果 */
.risk-level-card {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.25rem;
  border-radius: 16px;
  background: #fef2f2;
  border: 2px solid #ef4444;
  color: #991b1b;
}

.risk-level-card.risk-level-high {
  background: #fef2f2;
  border: 2px solid #ef4444;
  color: #991b1b;
}

.risk-level-card.risk-level-medium {
  background: #fffbeb;
  border: 2px solid #f59e0b;
  color: #92400e;
}

.risk-level-card.risk-level-low {
  background: #f0fdf4;
  border: 2px solid #10b981;
  color: #166534;
}

.risk-icon {
  font-size: 2rem;
}

.risk-content {
  display: flex;
  flex-direction: column;
}

.risk-title {
  font-size: 0.9rem;
  opacity: 0.8;
  margin-bottom: 0.25rem;
}

.risk-value {
  font-size: 1.5rem;
  font-weight: 700;
  color: #ef4444;
}

.impact-card {
  background: #f8fafc;
  border-radius: 16px;
  padding: 1.5rem;
  border: 1px solid #e2e8f0;
}

.impact-header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid #e2e8f0;
}

.impact-icon {
  font-size: 1.8rem;
  color: #1e40af;
}

.impact-title {
  font-size: 1.1rem;
  font-weight: 600;
  color: #1e293b;
}

.impact-content {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.impact-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.item-label {
  font-size: 0.9rem;
  color: #64748b;
}

.item-value {
  font-weight: 600;
  color: #1e40af;
}

.recommendations-card {
  background: #f8fafc;
  border-radius: 16px;
  padding: 1.5rem;
  border: 1px solid #e2e8f0;
}

.recommendations-header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid #e2e8f0;
}

.recommendations-icon {
  font-size: 1.8rem;
  color: #1e40af;
}

.recommendations-title {
  font-size: 1.1rem;
  font-weight: 600;
  color: #1e293b;
}

.recommendations-list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.recommendation-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.rec-number {
  font-size: 0.9rem;
  font-weight: 600;
  color: #1e40af;
  background: #e0e7ff;
  padding: 0.25rem 0.75rem;
  border-radius: 12px;
}

.rec-text {
  font-size: 0.9rem;
  color: #475569;
  line-height: 1.5;
}

.alerts-card {
  background: #f8fafc;
  border-radius: 16px;
  padding: 1.5rem;
  border: 1px solid #e2e8f0;
}

.alerts-header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid #e2e8f0;
}

.alerts-icon {
  font-size: 1.8rem;
  color: #1e40af;
}

.alerts-title {
  font-size: 1.1rem;
  font-weight: 600;
  color: #1e293b;
}

.alerts-list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.alert-item {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 0.75rem 1rem;
  border-radius: 12px;
  border: 1px solid #e2e8f0;
}

.alert-item.alert-critical {
  background: #fef2f2;
  border-color: #ef4444;
}

.alert-item.alert-warning {
  background: #fffbeb;
  border-color: #f59e0b;
}

.alert-item.alert-info {
  background: #e0f2fe;
  border-color: #3b82f6;
}

.alert-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.alert-severity {
  font-size: 0.8rem;
  font-weight: 600;
  padding: 0.25rem 0.75rem;
  border-radius: 12px;
  background: #f8fafc;
  color: #1e293b;
}

.alert-activity {
  font-size: 0.9rem;
  font-weight: 500;
  color: #475569;
}

.alert-description {
  font-size: 0.9rem;
  color: #64748b;
  line-height: 1.5;
}

/* 历史趋势分析 */
.trends-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1rem;
}

.trend-card {
  background: #f8fafc;
  border-radius: 16px;
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  border: 1px solid #e2e8f0;
}

.trend-date {
  font-size: 0.9rem;
  color: #64748b;
  margin-bottom: 0.5rem;
}

.trend-change {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 1.2rem;
  font-weight: 600;
  color: #1e40af;
}

.trend-up {
  color: #10b981;
}

.trend-down {
  color: #ef4444;
}

.trend-stable {
  color: #64748b;
}

.change-icon {
  font-size: 1rem;
}

.change-value {
  font-size: 1.2rem;
}

.trend-risk {
  font-size: 0.9rem;
  color: #64748b;
}

/* 预警区域 */
.alerts-section {
  background: white;
  border-radius: 20px;
  padding: 2rem;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

.alerts-summary {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.alerts-count {
  background: #e2e8f0;
  color: #475569;
  padding: 0.5rem 1rem;
  border-radius: 20px;
  font-size: 0.9rem;
  font-weight: 500;
}

.alerts-status {
  padding: 0.5rem 1rem;
  border-radius: 20px;
  font-size: 0.9rem;
  font-weight: 600;
}

.alerts-status.normal {
  background: #dcfce7;
  color: #166534;
}

.alerts-status.warning {
  background: #fef3c7;
  color: #92400e;
}

.alerts-status.critical {
  background: #fee2e2;
  color: #991b1b;
}

.alerts-content {
  margin-top: 1.5rem;
}

.alerts-list {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.alert-item {
  background: #f8fafc;
  border-radius: 16px;
  padding: 1.5rem;
  border-left: 4px solid;
  transition: all 0.3s ease;
}

.alert-item:hover {
  transform: translateX(5px);
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
}

.alert-item.high {
  border-left-color: #ef4444;
  background: #fef2f2;
}

.alert-item.medium {
  border-left-color: #f59e0b;
  background: #fffbeb;
}

.alert-item.low {
  border-left-color: #10b981;
  background: #f0fdf4;
}

.alert-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem;
}

.alert-level {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.level-badge {
  padding: 0.25rem 0.75rem;
  border-radius: 12px;
  font-size: 0.8rem;
  font-weight: 600;
  text-transform: uppercase;
}

.level-badge.high {
  background: #fee2e2;
  color: #991b1b;
}

.level-badge.medium {
  background: #fef3c7;
  color: #92400e;
}

.level-badge.low {
  background: #dcfce7;
  color: #166534;
}

.alert-type {
  font-weight: 600;
  color: #475569;
}

.alert-time {
  font-size: 0.9rem;
  color: #64748b;
}

.alert-content {
  margin-bottom: 1.5rem;
}

.alert-title {
  margin: 0 0 0.5rem 0;
  color: #1e293b;
  font-size: 1.1rem;
}

.alert-description {
  margin: 0;
  color: #64748b;
  line-height: 1.6;
}

.alert-actions {
  display: flex;
  gap: 0.75rem;
}

.no-alerts {
  text-align: center;
  padding: 3rem 2rem;
  color: #64748b;
}

.no-alerts-icon {
  font-size: 4rem;
  margin-bottom: 1rem;
  opacity: 0.5;
}

.no-alerts-title {
  margin: 0 0 0.5rem 0;
  color: #1e293b;
  font-size: 1.25rem;
}

.no-alerts-text {
  margin: 0;
  font-size: 1rem;
}

/* 生产数据区域 */
.production-section {
  background: white;
  border-radius: 20px;
  padding: 2rem;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

.production-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1.5rem;
}

.metric-card {
  background: #f8fafc;
  border-radius: 16px;
  padding: 1.5rem;
  display: flex;
  align-items: center;
  gap: 1rem;
  transition: all 0.3s ease;
}

.metric-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
}

.metric-icon {
  font-size: 2rem;
}

.metric-content {
  flex: 1;
}

.metric-value {
  font-size: 1.5rem;
  font-weight: 700;
  color: #1e40af;
  margin-bottom: 0.25rem;
}

.metric-label {
  color: #64748b;
  font-size: 0.9rem;
}

/* 按钮样式 */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1.5rem;
  border: none;
  border-radius: 12px;
  font-size: 0.95rem;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.3s ease;
  white-space: nowrap;
}

.btn-primary {
  background: #1e40af;
  color: white;
}

.btn-primary:hover {
  background: #1e3a8a;
  transform: translateY(-2px);
}

.btn-secondary {
  background: #64748b;
  color: white;
}

.btn-secondary:hover {
  background: #475569;
  transform: translateY(-2px);
}

.btn-outline {
  background: transparent;
  color: #1e40af;
  border: 2px solid #1e40af;
}

.btn-outline:hover {
  background: #1e40af;
  color: white;
}

.btn-text {
  background: transparent;
  color: #64748b;
}

.btn-text:hover {
  background: #f1f5f9;
  color: #1e293b;
}

/* 生产概览模态框 */
.metrics-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 1rem;
}

.metric-item {
  display: flex;
  align-items: center;
  gap: 1rem;
  background: #f8fafc;
  border-radius: 16px;
  padding: 1rem;
  border: 1px solid #e2e8f0;
}

.metrics-grid .metric-icon {
  font-size: 2.5rem;
  color: #1e40af;
}

.metrics-grid .metric-info {
  display: flex;
  flex-direction: column;
}

.metrics-grid .metric-value {
  font-size: 1.2rem;
  font-weight: 700;
  color: #1e40af;
}

.metrics-grid .metric-label {
  font-size: 0.8rem;
  color: #64748b;
}

.orders-summary {
  display: flex;
  justify-content: space-around;
  gap: 1rem;
  margin-top: 1.5rem;
}

.order-status-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  background: #f8fafc;
  border-radius: 16px;
  padding: 1rem;
  border: 1px solid #e2e8f0;
}

.status-icon {
  font-size: 2rem;
}

.status-icon.completed {
  color: #10b981;
}

.status-icon.pending {
  color: #f59e0b;
}

.status-icon.delayed {
  color: #ef4444;
}

.status-info {
  display: flex;
  flex-direction: column;
}

.status-value {
  font-size: 1.2rem;
  font-weight: 700;
  color: #1e40af;
}

.status-label {
  font-size: 0.8rem;
  color: #64748b;
}

.workers-summary {
  display: flex;
  justify-content: space-around;
  gap: 1rem;
  margin-top: 1.5rem;
}

.worker-status-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  background: #f8fafc;
  border-radius: 16px;
  padding: 1rem;
  border: 1px solid #e2e8f0;
}

.status-icon.active {
  color: #10b981;
}

.status-icon.break {
  color: #f59e0b;
}

.status-icon.total {
  color: #3b82f6;
}

.weather-impact-summary {
  display: flex;
  justify-content: space-around;
  gap: 1rem;
  margin-top: 1.5rem;
}

.impact-item {
  display: flex;
  align-items: center;
  gap: 1rem;
  background: #f8fafc;
  border-radius: 16px;
  padding: 1rem;
  border: 1px solid #e2e8f0;
}

.impact-icon {
  font-size: 2.5rem;
  color: #1e40af;
}

.impact-info {
  display: flex;
  flex-direction: column;
}

.impact-title {
  font-size: 1.1rem;
  font-weight: 600;
  color: #1e293b;
}

.impact-desc {
  font-size: 0.9rem;
  color: #64748b;
}

/* 设备状态模态框 */
.equipment-selector {
  display: flex;
  gap: 1rem;
  align-items: center;
}

.equipment-select {
  padding: 0.75rem 1rem;
  border: 2px solid #e2e8f0;
  border-radius: 12px;
  font-size: 1rem;
  width: 200px;
  transition: all 0.3s ease;
}

.equipment-select:focus {
  outline: none;
  border-color: #1e40af;
  box-shadow: 0 0 0 3px rgba(30, 64, 175, 0.1);
}

.health-overview {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  margin-bottom: 1.5rem;
  padding: 1.25rem;
  background: #f8fafc;
  border-radius: 16px;
  border: 1px solid #e2e8f0;
}

.health-circle {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: #e0f2fe;
  border: 5px solid #3b82f6;
}

.health-circle.health-excellent {
  background: #e0f2fe;
  border-color: #3b82f6;
}

.health-circle.health-good {
  background: #e0f2fe;
  border-color: #3b82f6;
}

.health-circle.health-fair {
  background: #e0f2fe;
  border-color: #3b82f6;
}

.health-circle.health-poor {
  background: #fef2f2;
  border-color: #ef4444;
}

.health-value {
  font-size: 2rem;
  font-weight: 700;
  color: #1e40af;
}

.health-label {
  font-size: 0.8rem;
  color: #64748b;
}

.health-info {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.health-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.health-icon {
  font-size: 1.2rem;
  color: #1e40af;
}

.health-text {
  font-size: 0.9rem;
  color: #475569;
}

.health-metrics {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-bottom: 1.5rem;
}

.metric-row {
  display: flex;
  align-items: center;
  gap: 1rem;
  background: #f8fafc;
  border-radius: 12px;
  padding: 0.75rem 1rem;
  border: 1px solid #e2e8f0;
}

.metric-label {
  font-size: 0.9rem;
  font-weight: 600;
  color: #1e293b;
}

.metric-bar {
  flex: 1;
  height: 8px;
  background: #e2e8f0;
  border-radius: 4px;
  overflow: hidden;
}

.metric-fill {
  height: 100%;
  border-radius: 4px;
  transition: width 0.3s ease;
}

.metric-value {
  font-size: 0.9rem;
  font-weight: 600;
  color: #1e40af;
}

.maintenance-info {
  padding: 1.25rem;
  background: #f8fafc;
  border-radius: 16px;
  border: 1px solid #e2e8f0;
}

.maintenance-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 0.5rem;
}

.maintenance-icon {
  font-size: 1.2rem;
  color: #1e40af;
}

.maintenance-label {
  font-size: 0.9rem;
  color: #64748b;
}

.maintenance-value {
  font-size: 0.9rem;
  font-weight: 600;
  color: #1e40af;
}

.recommendations-section {
  padding-top: 1.5rem;
  border-top: 1px solid #e2e8f0;
}

.recommendations-list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.recommendation-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.rec-number {
  font-size: 0.9rem;
  font-weight: 600;
  color: #1e40af;
  background: #e0e7ff;
  padding: 0.25rem 0.75rem;
  border-radius: 12px;
}

.rec-text {
  font-size: 0.9rem;
  color: #475569;
  line-height: 1.5;
}

/* 安全分析模态框 */
.safety-overview {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.safety-stat {
  display: flex;
  align-items: center;
  gap: 1rem;
  background: #f8fafc;
  border-radius: 16px;
  padding: 1rem;
  border: 1px solid #e2e8f0;
}

.stat-icon {
  font-size: 2.5rem;
  color: #1e40af;
}

.stat-info {
  display: flex;
  flex-direction: column;
}

.stat-value {
  font-size: 1.5rem;
  font-weight: 700;
  color: #1e40af;
}

.stat-label {
  font-size: 0.8rem;
  color: #64748b;
}

.incidents-list {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.incident-item {
  background: #f8fafc;
  border-radius: 16px;
  padding: 1.5rem;
  border-left: 4px solid;
  transition: all 0.3s ease;
}

.incident-item:hover {
  transform: translateX(5px);
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
}

.incident-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.75rem;
}

.incident-type {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.type-icon {
  font-size: 1.2rem;
  color: #1e40af;
}

.type-name {
  font-size: 1rem;
  font-weight: 600;
  color: #1e293b;
}

.incident-severity {
  font-size: 0.9rem;
  font-weight: 600;
  padding: 0.25rem 0.75rem;
  border-radius: 12px;
  background: #f8fafc;
  color: #1e293b;
}

.incident-severity.critical {
  background: #fef2f2;
  border: 2px solid #ef4444;
  color: #991b1b;
}

.incident-severity.warning {
  background: #fffbeb;
  border: 2px solid #f59e0b;
  color: #92400e;
}

.incident-severity.medium {
  background: #f0f9ff;
  border: 2px solid #0ea5e9;
  color: #0c4a6e;
}

.incident-severity.info {
  background: #e0f2fe;
  border: 2px solid #3b82f6;
  color: #1e293b;
}

.incident-content {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px dashed #e2e8f0;
}

.incident-location {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.location-icon {
  font-size: 1.2rem;
  color: #64748b;
}

.location-text {
  font-size: 0.9rem;
  color: #475569;
}

.incident-time {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-size: 0.9rem;
  color: #64748b;
}

.time-icon {
  font-size: 1rem;
  color: #1e40af;
}

.incident-description {
  font-size: 0.9rem;
  color: #64748b;
  line-height: 1.5;
}

.incident-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.9rem;
  color: #64748b;
}

.weather-related {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.weather-related.related {
  color: #10b981;
}

.weather-icon {
  font-size: 1rem;
  color: #10b981;
}

.weather-text {
  font-weight: 500;
}

.incident-status {
  font-weight: 600;
  padding: 0.25rem 0.75rem;
  border-radius: 12px;
  background: #f8fafc;
  color: #1e293b;
}

.incident-status.open {
  background: #fef2f2;
  border: 2px solid #ef4444;
  color: #991b1b;
}

.incident-status.closed {
  background: #f0fdf4;
  border: 2px solid #10b981;
  color: #166534;
}

.incident-status.investigating {
  background: #fffbeb;
  border: 2px solid #f59e0b;
  color: #92400e;
}

.safety-trends {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1rem;
  margin-top: 1.5rem;
}

.trend-item {
  display: flex;
  align-items: center;
  gap: 1rem;
  background: #f8fafc;
  border-radius: 16px;
  padding: 1rem;
  border: 1px solid #e2e8f0;
}

.trend-icon {
  font-size: 2rem;
  color: #1e40af;
}

.trend-info {
  display: flex;
  flex-direction: column;
}

.trend-title {
  font-size: 1rem;
  font-weight: 600;
  color: #1e293b;
  margin-bottom: 0.25rem;
}

.trend-desc {
  font-size: 0.8rem;
  color: #64748b;
}

/* 模态框增强样式 */
.modal-content {
  max-width: 800px;
  width: 90%;
  max-height: 90vh;
  overflow-y: auto;
}

.modal-body {
  padding: 2rem;
}

.analysis-section {
  margin-bottom: 2rem;
}

.analysis-section:last-child {
  margin-bottom: 0;
}

.section-title {
  font-size: 1.2rem;
  font-weight: 600;
  color: #1e293b;
  margin-bottom: 1rem;
  padding-bottom: 0.5rem;
  border-bottom: 2px solid #e2e8f0;
}

/* 按钮样式增强 */
.btn {
  padding: 0.75rem 1.5rem;
  border-radius: 12px;
  font-weight: 600;
  transition: all 0.3s ease;
  cursor: pointer;
  border: none;
  font-size: 0.9rem;
}

.btn-primary {
  background: #1e40af;
  color: white;
}

.btn-primary:hover {
  background: #1e3a8a;
  transform: translateY(-2px);
  box-shadow: 0 5px 15px rgba(30, 64, 175, 0.3);
}

.btn-secondary {
  background: #64748b;
  color: white;
}

.btn-secondary:hover {
  background: #475569;
  transform: translateY(-2px);
}

.btn-outline {
  background: transparent;
  color: #1e40af;
  border: 2px solid #1e40af;
}

.btn-outline:hover {
  background: #1e40af;
  color: white;
}

.btn-text {
  background: transparent;
  color: #64748b;
  padding: 0.5rem 1rem;
}

.btn-text:hover {
  color: #1e40af;
  background: #f1f5f9;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .nav-content {
    flex-direction: column;
    gap: 1rem;
    text-align: center;
  }

  .nav-title {
    font-size: 1.5rem;
  }

  .system-status {
    gap: 1rem;
  }

  .main-content {
    padding: 1rem;
  }

  .quick-actions {
    grid-template-columns: 1fr;
  }

  .weather-controls {
    flex-direction: column;
    align-items: stretch;
  }

  .city-input {
    width: 100%;
  }

  .weather-main {
    flex-direction: column;
    text-align: center;
  }

  .weather-details {
    justify-content: center;
  }

  .forecast-grid {
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  }

  .production-grid {
    grid-template-columns: 1fr;
  }

  .section-header {
    flex-direction: column;
    align-items: stretch;
    gap: 1rem;
  }
}

@media (max-width: 480px) {
  .nav-title {
    font-size: 1.25rem;
  }

  .title-icon {
    font-size: 1.5rem;
  }

  .temp-value {
    font-size: 3rem;
  }

  .forecast-grid {
    grid-template-columns: 1fr;
  }
}

/* 天气监控区域样式 */
.weather-section {
  background: white;
  border-radius: 20px;
  padding: 2rem;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  border: 1px solid #e2e8f0;
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 2rem;
  padding-bottom: 1rem;
  border-bottom: 2px solid #f1f5f9;
}

.section-title {
  font-size: 1.5rem;
  font-weight: 700;
  color: #1e293b;
  margin: 0;
}

.weather-controls {
  display: flex;
  gap: 1rem;
  align-items: center;
}

.city-input {
  padding: 0.75rem 1rem;
  border: 2px solid #e2e8f0;
  border-radius: 12px;
  font-size: 1rem;
  width: 200px;
  transition: all 0.3s ease;
}

.city-input:focus {
  outline: none;
  border-color: #1e40af;
  box-shadow: 0 0 0 3px rgba(30, 64, 175, 0.1);
}

.weather-content {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

/* 当前天气卡片 */
.current-weather-card {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border-radius: 20px;
  padding: 2.5rem;
  color: white;
  box-shadow: 0 8px 30px rgba(102, 126, 234, 0.3);
}

.weather-main {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 2rem;
}

.temperature-display {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
}

.temp-value {
  font-size: 4rem;
  font-weight: 800;
  line-height: 1;
}

.temp-unit {
  font-size: 2rem;
  font-weight: 600;
  opacity: 0.8;
}

.weather-info {
  text-align: right;
}

.weather-condition {
  font-size: 1.5rem;
  font-weight: 600;
  margin-bottom: 0.5rem;
}

.weather-location {
  font-size: 1.1rem;
  opacity: 0.9;
}

.weather-details {
  display: flex;
  justify-content: space-around;
  gap: 1rem;
}

.detail-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  text-align: center;
}

.detail-icon {
  font-size: 1.5rem;
}

.detail-label {
  font-size: 0.9rem;
  opacity: 0.8;
  font-weight: 500;
}

.detail-value {
  font-size: 1.1rem;
  font-weight: 700;
}

/* 天气预报网格 */
.forecast-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 1rem;
}

.forecast-day {
  background: white;
  border-radius: 16px;
  padding: 1.5rem;
  text-align: center;
  border: 2px solid #f1f5f9;
  transition: all 0.3s ease;
  cursor: pointer;
}

.forecast-day:hover {
  transform: translateY(-3px);
  border-color: #1e40af;
  box-shadow: 0 8px 25px rgba(30, 64, 175, 0.15);
}

.forecast-day.today {
  border-color: #1e40af;
  background: #f0f9ff;
  box-shadow: 0 4px 20px rgba(30, 64, 175, 0.1);
}

.forecast-date {
  margin-bottom: 1rem;
}

.day-name {
  font-size: 1rem;
  font-weight: 600;
  color: #1e293b;
  margin-bottom: 0.25rem;
}

.day-date {
  font-size: 0.9rem;
  color: #64748b;
}

.forecast-weather {
  margin-bottom: 1rem;
}

.weather-icon {
  font-size: 2rem;
  margin-bottom: 0.5rem;
}

.weather-text {
  font-size: 0.9rem;
  color: #475569;
  font-weight: 500;
}

.forecast-temp {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.25rem;
}

.temp-high {
  font-size: 1.1rem;
  font-weight: 700;
  color: #1e293b;
}

.temp-separator {
  font-size: 0.9rem;
  color: #94a3b8;
  margin: 0 0.25rem;
}

.temp-low {
  font-size: 1rem;
  font-weight: 600;
  color: #64748b;
}

/* 生产预警区域 */
.alerts-section {
  background: white;
  border-radius: 20px;
  padding: 2rem;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  border: 1px solid #e2e8f0;
}

.alerts-summary {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.alerts-count {
  font-size: 0.9rem;
  color: #64748b;
}

.alerts-status {
  padding: 0.25rem 0.75rem;
  border-radius: 12px;
  font-size: 0.8rem;
  font-weight: 600;
}

.alerts-status.normal {
  background: #f0fdf4;
  color: #166534;
  border: 1px solid #10b981;
}

.alerts-status.warning {
  background: #fffbeb;
  color: #92400e;
  border: 1px solid #f59e0b;
}

.alerts-status.critical {
  background: #fef2f2;
  color: #991b1b;
  border: 1px solid #ef4444;
}

.alerts-content {
  margin-top: 1.5rem;
}

.alerts-list {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.alert-item {
  background: #f8fafc;
  border-radius: 16px;
  padding: 1.5rem;
  border-left: 4px solid;
  transition: all 0.3s ease;
}

.alert-item.high {
  border-left-color: #ef4444;
  background: #fef2f2;
}

.alert-item.medium {
  border-left-color: #f59e0b;
  background: #fffbeb;
}

.alert-item.low {
  border-left-color: #10b981;
  background: #f0fdf4;
}

.alert-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem;
}

.alert-level {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.level-badge {
  padding: 0.25rem 0.75rem;
  border-radius: 12px;
  font-size: 0.8rem;
  font-weight: 600;
}

.level-badge.high {
  background: #fef2f2;
  color: #991b1b;
  border: 1px solid #ef4444;
}

.level-badge.medium {
  background: #fffbeb;
  color: #92400e;
  border: 1px solid #f59e0b;
}

.level-badge.low {
  background: #f0fdf4;
  color: #166534;
  border: 1px solid #10b981;
}

.alert-type {
  font-size: 0.9rem;
  color: #64748b;
}

.alert-time {
  font-size: 0.8rem;
  color: #94a3b8;
}

.alert-content {
  margin-bottom: 1rem;
}

.alert-title {
  font-size: 1.1rem;
  font-weight: 600;
  color: #1e293b;
  margin: 0 0 0.5rem 0;
}

.alert-description {
  font-size: 0.9rem;
  color: #64748b;
  line-height: 1.5;
  margin: 0;
}

.alert-actions {
  display: flex;
  gap: 0.75rem;
}

.no-alerts {
  text-align: center;
  padding: 3rem 2rem;
  color: #64748b;
}

.no-alerts-icon {
  font-size: 3rem;
  margin-bottom: 1rem;
}

.no-alerts-title {
  font-size: 1.2rem;
  font-weight: 600;
  color: #1e293b;
  margin: 0 0 0.5rem 0;
}

.no-alerts-text {
  font-size: 0.9rem;
  margin: 0;
}

/* 生产数据概览 */
.production-section {
  background: white;
  border-radius: 20px;
  padding: 2rem;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  border: 1px solid #e2e8f0;
}

.production-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1.5rem;
  margin-top: 1.5rem;
}

.metric-card {
  background: #f8fafc;
  border-radius: 16px;
  padding: 1.5rem;
  text-align: center;
  border: 1px solid #e2e8f0;
  transition: all 0.3s ease;
}

.metric-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
}

.metric-icon {
  font-size: 2.5rem;
  margin-bottom: 1rem;
  color: #1e40af;
}

.metric-content {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.metric-value {
  font-size: 1.8rem;
  font-weight: 700;
  color: #1e293b;
}

.metric-label {
  font-size: 0.9rem;
  color: #64748b;
  font-weight: 500;
}

.forecast-hint {
  font-size: 0.8rem;
  color: #64748b;
  text-align: center;
  margin-top: 0.5rem;
  opacity: 0.7;
  transition: opacity 0.3s ease;
}

.forecast-day:hover .forecast-hint {
  opacity: 1;
  color: #1e40af;
}

/* 详细天气信息模态框样式 */
.day-info-section {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border-radius: 20px;
  padding: 2rem;
  color: white;
  margin-bottom: 2rem;
  text-align: center;
}

.day-header {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.day-icon {
  font-size: 3rem;
}

.day-info {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.day-name {
  font-size: 1.5rem;
  font-weight: 700;
  margin-bottom: 0.5rem;
}

.day-date {
  font-size: 1.1rem;
  opacity: 0.9;
}

.day-weather {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
}

.weather-main-info {
  font-size: 1.8rem;
  font-weight: 600;
}

.temperature-range {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 1.2rem;
}

.temp-high {
  font-weight: 700;
}

.temp-separator {
  opacity: 0.7;
}

.temp-low {
  opacity: 0.8;
}

/* 24小时预报样式 */
.hourly-forecast-section {
  margin-bottom: 2rem;
}

.hourly-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 1rem;
  margin-top: 1rem;
}

.hourly-item {
  background: #f8fafc;
  border-radius: 16px;
  padding: 1rem;
  text-align: center;
  border: 1px solid #e2e8f0;
  transition: all 0.3s ease;
  cursor: pointer;
}

.hourly-item:hover {
  transform: translateY(-3px);
  border-color: #1e40af;
  box-shadow: 0 8px 25px rgba(30, 64, 175, 0.15);
}

.hour-time {
  font-size: 0.9rem;
  font-weight: 600;
  color: #1e293b;
  margin-bottom: 0.5rem;
}

.hour-icon {
  font-size: 1.5rem;
  margin-bottom: 0.5rem;
}

.hour-temp {
  font-size: 1.1rem;
  font-weight: 700;
  color: #1e40af;
  margin-bottom: 0.5rem;
}

.hour-weather {
  font-size: 0.8rem;
  color: #64748b;
  margin-bottom: 0.75rem;
}

.hour-details {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.detail-row {
  display: flex;
  justify-content: space-between;
  font-size: 0.7rem;
  color: #64748b;
}

.detail-label {
  opacity: 0.8;
}

.detail-value {
  font-weight: 600;
  color: #1e293b;
}

/* 生产影响分析样式 */
.production-impact-section {
  margin-bottom: 2rem;
}

.impact-summary {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1rem;
  margin-top: 1rem;
}

.impact-item {
  display: flex;
  align-items: center;
  gap: 1rem;
  background: #f8fafc;
  border-radius: 16px;
  padding: 1.25rem;
  border: 1px solid #e2e8f0;
}

.impact-icon {
  font-size: 2rem;
  color: #1e40af;
}

.impact-info {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.impact-title {
  font-size: 1rem;
  font-weight: 600;
  color: #1e293b;
}

.impact-desc {
  font-size: 0.9rem;
  color: #64748b;
  line-height: 1.4;
}

/* 生产建议样式 */
.production-recommendations-section {
  margin-bottom: 1rem;
}

.production-recommendations-section .recommendations-list {
  margin-top: 1rem;
}

.production-recommendations-section .recommendation-item {
  background: #f0f9ff;
  border-radius: 12px;
  padding: 1rem;
  margin-bottom: 0.75rem;
  border-left: 4px solid #1e40af;
}

.production-recommendations-section .rec-number {
  background: #1e40af;
  color: white;
}

.production-recommendations-section .rec-text {
  color: #1e293b;
  font-weight: 500;
}
</style>